<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>产品列表弹出窗体</title>
		<script src="../../../../js/vue/vue.js"></script>
		<script src="../../../../js/vue/element-ui/lib/index.js"></script>
		<script src="../../../../js/myelement.js"></script>
		<script src="../../../../js/vue/page.js"></script>
		
		<link href="../../../../js/vue/element-ui/lib/theme-chalk/index.css" rel="stylesheet">
		<link href="../../../../css/myelement.css" rel="stylesheet">
		<link href="../../../../css/iconfont.css" rel="stylesheet">
		<link href="../../../../css/page.css" rel="stylesheet">
		<link href="//at.alicdn.com/t/font_2374495_13ltsxm2eor.css" rel="stylesheet">	
	</head>
	<body>
		<div id="vbody">
			<div id="page_root">
				<div ref="popup_body" style="padding-right: 20px;">
					<div class="el-dialog__header">
						<div class="dialog-title">
							<i class="iconfont icon-customermanagement"></i>
							<span>选择产品</span>
						</div>
					</div>	
					<div style="height: 550px; overflow-y: auto;">
						<div class="el-dialog__body">
							<div class="topbar-line">
								<div class="query-icon">
									<i class="iconfont icon-query"></i>
								</div>
								<div class="query-bar" style="width: 85%;">
									<h-form-filter ref="form1"
										:form-attr="filterAttr" 
										:table-fields="filterFields" 
										:form-data="filterObj" 
										:isbuttonquery="false"
										v-on:on-formchange="onQuery" 
										v-on:on-query="onQuery"
										v-on:on-init-query="onInitFilter"
										
										>
									</h-form-filter>
								</div>
							</div>
							<h-table
								v-if="isRefresh"
								ref="table1"
								:table-fields="tableFields" 
								:tableloading="isTableLoading"
								:table-data="tableData" 
								:pagesize="pagesize"
								:pagenum="pagenum"
								:total="total"
								:table-height="tableHeight1"
								:is-highlight-row="true"
								:is-selection="isSelection"
								v-on:get-data="getData"
								v-on:row-click="rowClick"
								v-on:row-dblclick="rowDblClick"
								v-on:selection-change="handleSelectionChange"
								
							>
							</h-table>
						</div>
					</div>
					<div class="el-dialog__footer">
						<el-button v-if="closeSave" type="default" @click="close">取 消</el-button>
						<el-button v-if="!closeSave" type="default" @click="close">å…³ é—­</el-button>
						<el-button v-if="closeSave" type="primary" @click="saveFormValByField">保 存</el-button>
					</div>
				</div>
			</div>
			<div id="page_loading" style="position: absolute; top:0px; width: 100vw; height: 100vh;">
				<div class="spinner">
				  <div class="cube1"></div>
				  <div class="cube2"></div>
				</div>
			</div>
		</div>

		<script type="text/javascript">
			
			new ListVue({
				el: "#vbody",
				data: {
					dataname: "factory_product",
					isRefresh: true,
					pagesize: 10,
					pagenum: 1,
					total: 0,
					pageAttr: {
					   heightType: "page"
					},
					isTableLoading: true,
					tableAttr: {},
					tableFields: [],
					tableFieldsObj: {},
					
					tableData: [],
					tableHeight1: 320,
					selectrow: {},
					
					formInline_gh: {},
					popupParames: {},
					
					//查询功能
					filterFields:[],
					filterFieldsObj: {},
					filterObj: {},
					filterList:[],
					filterAttr: {
						columnnumber: 3,
						labelwidth: "90px",
						labelposition: "right",
						size: "medium",
						border: "3px solid #c6c6c600"
					},
					
					dataRequest: [
						{
							isClientMode: false,
							code: "code",
							label: "name",
							name: "delivery_part_code",
							dataname: "deliveryOrganization",
						},
					],
					dataRequestObj: {},
					isSelection:false,
					closeSave:true,
				},
				
				created() {
					this.popupParames = clone(Root.popupParames);
					
					if (this.popupParames.type == "onlySimple") {
						this.tableHeight1 = 380;
					}
					
					if(this.popupParames.sceneCode == "territory"){
						this.closeSave = false;
						this.initFields();
						// if(this.popupParames.data.cnt > 0){
						// 	let me = this;
							
						// 	let param_ = {
						// 		isClientMode: false,
						// 		dataname: "popedomDetail",
						// 		filter: " popedom_detail.parent_id='"+this.popupParames.data.id+"'",
						// 		orderby: "",
						// 		page: {
						// 			no: this.pagenum,
						// 			pagesize: this.pagesize
						// 		},
						// 		//attachmeta: true
						// 	}
						// 	Server.call("root/data/getEntitySet", param_, function(result) {
						// 		me.total = 0;
						// 		me.tableData = [];
						// 		if (result && result.data) {
						// 			var data_ = result.data.entityset;
						// 			me.total = result.data.page.recordcount;
						// 			me.tableData = data_;
						// 		}
						// 		me.tableDataAfter();
						// 	});
						// }else{
						// 	this.initFields();
						// }
					}else{
						this.initFields();
					}
				},
				
				mounted() {
					
					
					this.$nextTick(() => { // 以服务的方式调用的 Loading 需要异步关闭
						document.getElementById('page_root').style.display =  "block";
						document.getElementById('page_loading').style.display =  "none";
						
						//重新设置弹窗宽高
						this.$nextTick(function(){
						   document.getElementById('page_root').classList.add("z_popup-page");
						   let w_ = this.$refs.popup_body.offsetWidth + "px";
						   let h_ = this.$refs.popup_body.offsetHeight + "px";
						   Root.setPopupWH(w_, h_);
						  })
					});
				},
				
				methods:{
					initFields() {
						let me = this;
						if (me.popupParames.isSelection){
							this.isSelection = true
						}
						
						if(me.popupParames.type == "onlySimple" ){
							me.tableFields = dataRootFields.tableFields.chooseproduct_;
							me.filterFields = dataRootFields.filterFields.chooseproduct_simple;
							me.onQuery();
						}
						else if (me.popupParames.isdefaultfilter && me.popupParames.type=="sorder") {//设置新的筛选字段
							this.filterObj = {};
							this.filterObj = me.popupParames.filterObj;
							
							me.filterFields = clone(dataRootFields.filterFields.chooseproduct_sorder_);
							me.tableFields = dataRootFields.tableFields.choosesorderproduct_;
							me.loadRequestData(me.dataRequest, {}, function(data) {
								me.dataRequestObj = data;
								if (me.filterFields.length) {
									var formFields_part_ = clone(me.filterFields);
									formFields_part_.map(e=>{
										 if(e.field == "delivery_part_code") 
											e.options = me.dataRequestObj.delivery_part_code;
									});
									me.filterFields = formFields_part_;
								}
								me.onQuery();
							});
							me.filterAttr.labelwidth = "120px";
							
						}
						else{
							me.filterFields = clone(dataRootFields.filterFields.chooseproduct_);
							me.tableFields = dataRootFields.tableFields.choosesorderproduct_;
							this.loadRequestData(this.dataRequest, {}, function(data) {
								me.dataRequestObj = data;
								if (me.filterFields.length) {
									var formFields_part_ = clone(me.filterFields);
									formFields_part_.map(e=>{
										 if(e.field == "delivery_part_code") 
											e.options = me.dataRequestObj.delivery_part_code;
									});
									me.filterFields = formFields_part_;
								}
								me.onQuery();
							});
							me.filterAttr.labelwidth = "120px";
						}
					},
					onServerInitData(data) {
						
					},
					onQuery: function() {
						this.pagenum = 1;
						this.doQuery();
					},
					
					onInitFilter: function() {
						this.filterObj = {};
						this.onQuery();
					},
					
					doQuery() {
						let me = this;
						me.isTableLoading = true;
						let filter_ = " 1=1 ";
						if(me.filterFields.length > 0) {
							for(var i=0; i < me.filterFields.length; i++) {
								let fieldObj_ = me.filterFields[i];
								me.filterFieldsObj[fieldObj_.field] = fieldObj_;
							}
						}	
						
						for(var k in this.filterObj) {
							let k_val = this.filterObj[k];
							let fieldObj_ = this.filterFieldsObj[k];
							
							let type_ = fieldObj_.type;
							let field_ = fieldObj_.field;
							let fieldtype_ = "equal";
							if (fieldObj_.fieldname) {
								field_ = fieldObj_.fieldname
							}
							if (fieldObj_.fieldtype) {
								fieldtype_ = fieldObj_.fieldtype
							}
							if (fieldtype_ == "like") {
								filter_ += " and " + field_ + " like '%" + k_val +"%'";
							}
							else {
								filter_ += " and " + field_ + " = '" + k_val +"'";
							}
						}
						
						if (me.popupParames.dataname){
							this.dataname = me.popupParames.dataname
						}
						if (me.popupParames.filter){
							filter_ += me.popupParames.filter
						}
						
						if(this.popupParames.sceneCode == "territory" && this.popupParames.data.cnt > 0){
							this.territoryDoQuery();
						}
						else {
							let param_ = {
								isClientMode: false,
								dataname: this.dataname,
								filter: filter_,
								//empCode:localStorage.getItem("emp_code"),
								orderby: "",
								page: {
									no: this.pagenum,
									pagesize: this.pagesize
								},
								//attachmeta: true
							}
							Server.call("root/data/getEntitySet", param_, function(result) {
								me.total = 0;
								me.tableData = [];
								me.isTableLoading = false;
								if (result && result.data) {
									var data_ = result.data.entityset;
									me.total = result.data.page.recordcount;
									me.tableData = data_;
								}
								
								me.tableDataAfter();
							});
						}
						
					},
					territoryDoQuery() {
						let me = this;
						this.initFields();
						
						let param_ = {
							isClientMode: false,
							dataname: "popedomDetail",
							filter: " popedom_detail.parent_id='"+this.popupParames.data.id+"'",
							orderby: "",
							page: {
								no: this.pagenum,
								pagesize: this.pagesize
							},
							//attachmeta: true
						}
						Server.call("root/data/getEntitySet", param_, function(result) {
							me.total = 0;
							me.tableData = [];
							if (result && result.data) {
								var data_ = result.data.entityset;
								me.total = result.data.page.recordcount;
								me.tableData = data_;
							}
							me.tableDataAfter();
						});
					},
					
					handleSelectionChange(selection) {
						if (selection.length > 0) {
							for (var i = 0; i < selection.length; i++) {
								
								this.selectionList = selection;
							}
						}
					},
					getData: function(page) {
						this.pagesize = page.pagesize;
						this.pagenum = page.pagenum;
						this.doQuery();
					},
					
					rowDblClick(event) {
						this.saveFormValByField();
					},
					
					rowClick(event) {
						this.selectrow = event.row;
					},
					
					close: function() {
						Root.hidePopup();
					},
					
					saveFormValByField() {
						if(this.popupParames.callback) {
							document.getElementById('page_root').style.display =  "none";
							document.getElementById('page_loading').style.display =  "block";
							if(this.popupParames.isSelection){
								let array = clone(this.selectionList)
								this.popupParames.callback(array, function() {
									Root.hidePopup();
								});
							}else{
								let obj = {
									row: this.selectrow
								}
								this.popupParames.callback(obj, function() {
									Root.hidePopup();
								});
							}
						}
						else {
							alert("该按键事件缺失!")
						}
					},
				}
			});
				
		</script>	
	</body>
</html>